<template>
  <!-- 查看外包机构信息-->
  <div class="page">
    <el-form :model="form" ref="add-form" label-width="100px" align="left">
      <el-row>
        <el-col :span="12">
          <el-form-item label="机构名称：" prop="name">
            <span>{{form.name}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机构类型：" prop="organizationType">
            <span>{{$filter.dictConvert(form.organizationType,'OutSourceType')  }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="工商登记码：" prop="business">
            <span>{{form.business}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分案代码：" prop="division">
            <span>{{form.division}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人姓名：" prop="linkMan">
            <span>{{form.linkMan}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人电话：" prop="linkPhone">
            <span>{{form.linkPhone}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人地址：" prop="address">
            <span>{{form.address}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人邮箱：" prop="age">
            <span>{{form.email}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="机构管理员：" prop="admin">
            <span>{{form.admin}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签约日期：" prop="time">
            <span>{{form.time}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="催收区域：">
            <span>{{form.areaName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分案状态：" prop="status">
            <span>{{$filter.dictConvert(form.status,'CommonState') }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="可催收区域：" v-show="form.selectedCitysList">
            <el-tag v-for="tag in form.selectedCitysList" :key="tag.value">{{tag.label}}</el-tag>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="备注：" prop="remark">
            <span>{{form.remark}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>

</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { State, Mutation, Getter, namespace } from 'vuex-class';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import clone from 'clone';
import AreaSelection from '~/components/common/area-selection.vue';
import { CityService } from '~/utils/city.service';
import { OutsourceCommissionedService } from '~/services/domain-service/outsource-commissioned-manage.service';

@Component({
  components: {
    AreaSelection,
  },
})
export default class CommissionedDialog extends Vue {
  @Dependencies(OutsourceCommissionedService)
  private outsourceCommissionedService: OutsourceCommissionedService;

  @Prop({ required: true })
  private caseRow: any;
  private form: any = {
    name: '',
    business: '', // 工商登记码
    division: '', // 分案代码
    admin: '', //机构管理员
    time: '', //签约日期
    proinviceCode: '',
    cityCode: '',
    status: '',
    address: '',
    organizationType: '',
    linkMan: '',
    linkPhone: '',
    email: '',
    remark: '',
    selectedCitysList: [],
    areaId: '',
    areaName: '',
    deptName: '',
  };

  private mounted() {
    this.formData();
  }

  @Watch('caseRow')
  private onCaseRowChange() {
    this.formData();
  }

  //数据回显
  private formData() {
    this.form = {};

    this.form.name = this.caseRow.outsName;
    this.form.organizationType = this.caseRow.outSourceType;
    this.form.status = this.caseRow.outsourceStatus;
    this.form.companyCode = this.caseRow.companyCode;
    this.form.proinviceCode = this.caseRow.areaId;
    this.form.cityCode = this.caseRow.areaId;
    this.form.address = this.caseRow.outsAddress;
    this.form.deptName = this.caseRow.deptName;
    this.form.linkMan = this.caseRow.outsContacts;
    this.form.linkPhone = this.caseRow.outsPhone;
    this.form.remark = this.caseRow.outsRemark;
    this.form.email = this.caseRow.email;
    const arr = this.$city.getCityParent(Number(this.caseRow.areaId));
    arr.push(this.caseRow.areaId);
    this.form.areaName = this.$city.getCityName(...arr);
    //需要去掉,
    if (this.caseRow.areaCodeIds) {
      const temp = this.caseRow.areaCodeIds.split(',').filter((item) => {
        return item;
      });
      const Ids = temp.map((val) => Number(val));
      this.form.selectedCitysList = Ids.map((val) => {
        return {
          value: val,
          label: this.$city.getCityNameById(val),
        };
      });
    }
  }
}
</script>
<style lang="less" scoped>
.data-grid {
  margin-bottom: 10px;
}

.header {
  border: solid 1px #dee1e5;
  border-bottom: 0px;
  height: 40px;
  line-height: 40px;
}
</style>
<style lang='less' >
#app .page .el-form .el-form-item .el-select.address .el-input {
  width: 100%;
}
</style>
